import React from 'react';
import { Table } from 'antd';
import { ObjectType, transferTimestampToSecond } from '../../utils';
import { changeTypes, financeSubType, userTypes } from '@/const/risk';
import style from './detailPage.less';

const { Column, ColumnGroup } = Table;

export default class DetailPageTable extends React.Component<ObjectType> {
  public columns = [
    {
      dataIndex: 'column2',
      key: 'column2',
    },
    {
      dataIndex: 'column3',
      key: 'column3',
    },
    {
      dataIndex: 'column4',
      key: 'column4',
    },
    {
      dataIndex: 'column5',
      key: 'column5',
    },
  ];

  userInfo = () => {
    const {
      detailPageData: { username, userType },
      userLevel,
    } = this.props;
    const userTypeObj = userTypes.filter((val: ObjectType) => val.id === userType * 1);

    const level = userTypeObj[0] && userTypeObj[0].text;
    return (
      <div className={style.userInfo}>
        <h3 className="user-name">{username}</h3>
        <div className="mark">
          <p className="amount-type">{level}</p>
          <p className="user-level">{userLevel}</p>
        </div>
      </div>
    );
  };

  data = () => {
    const {
      detailPageData: {
        creator,
        createTime,
        firstApprover,
        firstTime,
        changeType,
        amount,
        subType,
        freezeAmount,
      },
    } = this.props;
    return [
      {
        key: '1',
        age: this.userInfo(),
        column2: '申请人',
        column3: creator,
        column4: '申请时间',
        column5: transferTimestampToSecond(createTime),
      },
      {
        key: '2',
        column2: '一审人',
        column3: firstApprover,
        column4: '一审时间',
        column5: transferTimestampToSecond(firstTime),
      },
      {
        key: '3',
        column2: '调整类型',
        column3: changeTypes.filter((val: ObjectType) => val.id === changeType)[0].text,
        column4: '调整资金',
        column5: amount,
      },
      {
        key: '4',
        column2: '细分类型',
        column3: financeSubType.filter((val: ObjectType) => val.id === subType)[0].text,
        column4: '需求流水金额',
        column5: freezeAmount,
      },
    ];
  };

  render() {
    return (
      <Table<>
        dataSource={this.data()}
        bordered
        showHeader={false}
        pagination={{ position: 'none' }}
      >
        <Column
          title="Age"
          dataIndex="age"
          key="age"
          render={(value, row, index) => {
            const obj = {
              children: value,
              props: {
                rowSpan: 4,
                className: 'user-info',
              },
            };
            if (index) {
              obj.props.rowSpan = 0;
            }
            return obj;
          }}
        />
        <ColumnGroup title="Name">
          {this.columns.map((val: ObjectType) => (
            <Column
              dataIndex={val.dataIndex}
              key={val.key}
              render={value => {
                if (val.key === 'column2' || val.key === 'column4') {
                  return {
                    children: value,
                    props: {
                      className: 'gray-bg',
                    },
                  };
                }
                return value;
              }}
            />
          ))}
        </ColumnGroup>
      </Table>
    );
  }
}
